<template>
	<div class="wrapper height100">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="banklist wrapbd">
			<ul>
				<li v-for="(item,index) in address" :key="index">
					<div class="iscard">
                        <div style=" width:100%;overflow: hidden;"><span class="left">{{item.user_name}}</span><span class="right">{{item.moble}}</span></div>
						<div><p>{{item.areas}}{{item.address}}</p></div>
					</div>
					<span class="isadd">
						<label @click="setAddress(item.id)"><i class="fa fa-lg" :class="{' fa-circle-thin bi' : item.is_default == 0,'fa-dot-circle-o ai' : item.is_default == 1}" aria-hidden="true"></i><p>设为默认</p></label>
						<label @click="deleteAddress(item.id)"><i class="fa fa-trash fa-lg" aria-hidden="true"></i><p>删除</p></label>
						<label @click="editAddress(item)"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i><p>编辑</p></label>
					</span>
				</li>
			</ul>
            <cell-group>
                <cell title="添加收货地址" @click="addAddressUrl"/>
            </cell-group>
		</div>
	</div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";
    import { Cell, CellGroup, Dialog } from 'vant';
	export default {
		data(){
			return {
				headText: '收货地址',  //顶部标题
				address:{},
			}
		},
		mounted(){
            this.initialize() //拉取收货地址信息
		},
		methods:{
			//返回
			onClickLeft () { this.$route.query.type == 1 ? this.$router.push('/confirmOrder') : this.$router.push('/setting');},
      // onClickLeft () { this.$router.go(-1);},
			//获取收货地址信息
			initialize(){
				var _this = this;
				this.Tools.AXIOS({
                    url: 'address/list',
                    success: function (res) {
                       _this.address = res.data.data.list;
                    }
                })
			},
			//删除收货地址
			deleteAddress(id){
				let _this = this;
				Dialog.confirm({
                title: '温馨提示',
                message: '确定删除收货地址？'
                }).then(() => {
					this.Tools.AXIOS({
	                    url: 'address/del',
	                    transformRequest: {
	                        id : id,    //收货地址ID
	                    },
	                    success: function (res) {
	                        _this.$toast.success('已删除');
	                        _this.initialize() //重新拉取收货地址信息
		                },error(){}
	                })
                });
			},
			//设为默认值
			setAddress(id){
				let _this = this;
				this.Tools.AXIOS({
					url: 'address/setdef',
					transformRequest: {
						id : id,    //收货地址ID
					},
					success: function (res) {
						_this.initialize() //重新拉取收货地址信息
					},error(){}
				})
			},
			//编辑收货地址、
			editAddress(item){
				if(this.$route.query.type == 1){
					this.$router.push({path:'addAddress',query: {id:item.id,edit:1,type:1}});
				}else{
					this.$router.push({path:'addAddress',query: {id:item.id,edit:1}});
				}
			},
			//添加收货地址
			addAddressUrl(){
				this.$route.query.type == 1 ? this.$router.push({path:'addAddress',query: {type:1}}) : this.$router.push('/addAddress');
			}
		},
		components: {
            HeadTitle,
            Cell,
			CellGroup,
			Dialog
		},
	}
</script>
<style scoped>
.banklist{ background-color: #fff; }
.banklist li{ width: 100%; overflow: hidden; padding: .3rem 0; margin: 0 auto; border-bottom: 5px solid #F4F4F4;}
.banklist li .iscard{ width: 90%; margin: 0 auto; overflow: hidden; padding-bottom: .2rem; border-bottom: 1px solid #F4F4F4}
.banklist li .isadd{ width: 90%; margin: 0 auto; padding-top: .2rem; display: flex;}
.banklist li .isadd label{ width: 30%; display: flex;}.banklist li .isadd label i{ margin-top: 0.05rem;}.banklist li .isadd label p{ margin-left: .2rem;}
.banklist li .iscard i{ margin-top: .3rem;}.ai{ color: #e64817;}.bi{ color: #666;}
.banklist li .iscard span{ font-size: .35rem;}
.banklist li .iscard span label{ font-size: 1rem; color: #666; margin-left: 5px;}
.banklist li .iscard .ts{ width: 10%; overflow: hidden; margin: .1rem 0 0 .5rem;}
.banklist li .iscard .ts img{ width: 100%;}
.banklist li .iscard p{ font-size: .35rem;}
.banklist li .iscard div:nth-of-type(2){ color: #999; margin-top: .2rem;}
</style>
